<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./css/bootstrap.css"> -->
    <!-- <link rel="stylesheet" href="./css/lib/bootstrap@3.3.4/css/bootstrap-theme.css"> -->
    <link rel="stylesheet" href="./css/lib/bootstrap@3.3.4/css/bootstrap.css">
</head>
<style>
    body {
        background-color: pink;
    }

    .big {
        position: relative;
        width: 800px;
        height: 450px;
        margin: 100px auto;
    }

    video {
        width: 800px;


    }

    #paused {
        width: 50px;
        height: 50px;
        background-color: rgba(250, 235, 215, 0.478);
        position: absolute;
        bottom: 30px;
        text-align: center;
        border-radius: 50%;
    }

    .glyphicon-play {
        font-size: 30px;
        line-height: 50px;
        width: 50px;
        vertical-align: baseline;
    }

    #outer {
        width: 700px;
        height: 10px;
        background-color: rgba(170, 116, 116, 0.405);
        border-radius: 5px;
        position: absolute;
        bottom: 50px;
        left: 80px;
    }

    #inner {
        width: 0;
        height: 10px;
        background-color: blueviolet;
        border-radius: 5px 0 0 5px;
    }

    .ear {
        font-size: 20px;
    }
</style>

<body>
    <div class="big">
        <video controls src="./images/audio/【欣小萌】浪人琵琶✿谁陪我浪迹天涯 - 1.横版(Av33962846,P1).flv.mp4" class="myVideo"></video>
        <div id="paused"><span class="glyphicon glyphicon-play"></span></div>
        <div id="outer">
            <div id="inner"></div>
        </div>
        <div class="ear">
            <span class="glyphicon glyphicon-volume-off"></span><span
                class="glyphicon glyphicon-volume-down"></span><span class="glyphicon glyphicon-volume-up"></span><span
                class="glyphicon glyphicon-fullscreen"></span>
        </div>
    </div>

</body>
<script>
    var my_video = document.querySelector(".myVideo");
    var pause = document.querySelector("#paused");
    pause.onclick = function () {
        if (my_video.paused) {
            my_video.play();
        } else {
            my_video.pause()
        }
    }

    outer.onmousedown = function (ev) {
        ev.pageX
        console.log(ev.pageX);
        inner.style.width = ev.pageX - this.getBoundingClientRect().left + "px";
        this.go = true;
    }

    outer.onmousemove = function (ev) {
        if (this.go) {
            ev.pageX
            console.log(ev.pageX);
            inner.style.width = ev.pageX - this.getBoundingClientRect().left + "px";
            my_video.currentTime = inner.offsetWidth / this.offsetWidth * my_video.duration;
        }
    }

    document.body.onmouseup = function () {
        outer.go = false;
    }

    my_video.ontimeupdate = function () {
        inner.style.width = outer.offsetWidth * my_video.currentTime / my_video.duration + "px";
        console.log(my_video.duration)
    }

    var oEar = document.querySelector(".ear");
    console.log(oEar.children[0]);
    oEar.children[0].onclick = function () {
        if (!this.flag) {
            my_video.volume = "0";
            this.flag = true;
        } else {
            my_video.volume = "1";
            console.log(my_video.volume)
            this.flag = false;
        }
    }

    oEar.children[1].onclick = function () {
        if (my_video.volume <= 0) {
            my_video.volume = 0;
        } else {
            my_video.volume = my_video.volume - 0.1;
            console.log(my_video.volume)
        }
    }
    oEar.children[2].onclick = function () {
        if (my_video.volume >= 1) {
            my_video.volume = 1;
        } else {
            my_video.volume = my_video.volume + 0.1;
            console.log(my_video.volume)
        }
    }

    oEar.children[3].onclick = function () {
        my_video.webkitRequestFullScreen()
    }
</script>

</html>